<template>
  <el-container>
    <el-header>
      <!--头部-->
      <Header></Header>
    </el-header>
    <br>
    <el-main>
      <!--搜索-->
      <Search></Search>
      <el-row>
          <el-col :span="1">&nbsp;</el-col>
          <el-col :span="22">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item>全部</el-breadcrumb-item>
              <el-breadcrumb-item>
                {{type}}
              </el-breadcrumb-item>
            </el-breadcrumb>
            <br>
            <table width="100%" style="border: 2px solid whitesmoke;padding: 20px;font-size: 14px">
              <tr >
                <td><span>品类:</span></td>
                <template v-for="x in brand">
                  <td ><el-link type="primary"  @click="queryByBrand(x)">{{x.brandName}}</el-link></td>
                </template>
              </tr>
              <tr >
                <td><span>价格:</span></td>
                <td><el-link type="primary" @click="queryByPrice(0,0)">全部</el-link></td>
                <td><el-link type="primary" @click="queryByPrice(0,199)">0-199</el-link></td>
                <td><el-link type="primary"@click="queryByPrice(200,299)">200-299</el-link></td>
                <td><el-link type="primary"@click="queryByPrice(300,399)">300-399</el-link></td>
                <td><el-link type="primary"@click="queryByPrice(400,499)">400-499</el-link></td>
                <td><el-link type="primary"@click="queryByPrice(500,599)">500-599</el-link></td>
                <td><el-link type="primary"@click="queryByPrice(600,699)">600-699</el-link></td>
                <td><el-link type="primary"@click="queryByPrice(700,799)">700-999</el-link></td>
                <td><el-link type="primary"@click="queryByPrice(1000,100000)">1000以上</el-link></td>
              </tr>
            </table>
            <br>
            <div >
              <el-button type="danger"  size="small"  >销量:从高到低</el-button>
              <el-button type="primary" size="small" >销量:从低到高</el-button>
              <el-button type="primary" size="small" >价格:从高到低</el-button>
              <el-button type="primary" size="small" >价格:从低到高</el-button>

              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.page"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </div>

            <div v-for="x in imgGirl"  >
            <div style="float:left;width: 260px;height: 300px">
              <ul style="list-style-type: none">
                <li>
                  <a  @click="toDetail(x)">
                    <img :src="require('../../assets/images/'+x.src)" width="220px" height="220px">
                  </a>

                </li>
                <li>
                  <ul style="list-style-type: none;font-size: 12px">
                    <li><el-tag type="danger">特卖价:{{x.price}}元</el-tag></li>
                    <li>
                      <el-link style="font-size: 12px">{{x.title}}</el-link>
                    </li>

                  </ul>
                </li>
              </ul>

            </div>
            </div>



          </el-col>


        <el-col :span="1">&nbsp;</el-col>

      </el-row>


    </el-main>
    <Footer></Footer>
  </el-container>
</template>

<script>
  import Header from "./myComponents/Header";
  import Search from "./myComponents/Search";
  import Footer from "./myComponents/Footer";
    export default {
        name: "ProductClass",
        components:{
          Header,
          Search,
          Footer
      },
      computed:{
         type () { //技术类型
            if (this.query.proType==1) {
              return "男装";
            }
           if (this.query.proType==2) {
             return "女装";
           }
           if (this.query.proType==3) {
             return "鞋包";
           }

         }
      },
        data(){
           return{
               brand:[],//品牌
               imgGirl:[],
               query:{ //查询参数
                 proType:1,//商品类型
                 brandId:0,//商品品牌，0:表示查询所有品牌
                 startPrice:0,
                 endPrice:0,
                 page:1,
                 row:10
               },
               total:0
           }
        },
        methods:{
          queryGoodsData(){//查询首页数据
            const self = this;
            //发送ajax请求
            const http = this.$http.get("/goods-info/queryGoodsData",{params:this.query});
            //成功回调
            http.then(function (rs) {
              console.log(rs.data);
              if(rs.data.code==200){
                //遍历赋值
                self.imgGirl = rs.data.data.list;
                self.total = rs.data.data.total;
                self.brand = rs.data.data.brandList;

              }else{
                //提示
                self.imgGirl = [];
                self.total = 0;
                self.$message(rs.data.msg);
              }
            });
            http.catch(function () {
              self.$alert("服务器异常，请检查地址或者服务器是否启动");
            })
          },
          handleSizeChange(row){
            this.query.row = row;
            this.query.page =1;
            this.queryGoodsData();
          },
          handleCurrentChange(page){
            this.query.page = page;
            this.queryGoodsData();
          },
          queryByBrand(x){

            this.query.brandId = x.brandId;
            this.queryGoodsData();
          },
          queryByPrice(s,e){
            this.query.startPrice = s;
            this.query.endPrice = e;
            this.queryGoodsData();
          },
          toDetail(x){
            this.$router.push({"name":"productDetail",query:x});
          }

      },
      created() {
          this.query.proType = localStorage.getItem("proType");
          this.queryGoodsData();

      },


    }
</script>

<style scoped>

</style>
